<template>
	<view class="content">
		<!--用户信息-->
		<view class="content_1">
			<image class="userimg" :src="userimg"></image>
			<view class="userinfo_view">
				<view class="user_id" v-if="userstate == 'renter'" style="background-color: #FFC26D;">我是租客</view>
				<view class="user_id" v-if="userstate == 'owner'" style="background-color: #4D8EE0;">我是房东</view>
				<view><button class="username" open-type="getUserInfo" @getuserinfo="getUserInfo">{{username}}</button></view>
				<view class="userinteg" @click="toRentPint">
					<image class="integicon" src="../../static/mine/integral.svg"></image>
					<view class="integnum">{{point}}积分</view>
					<image class="integright" src="../../static/mine/toRight.svg"></image>
				</view>
			</view>
			<!--用户类别-->
			<view class="usertypes" v-if="userstate == 'renter'">
				<view class="types_box" @click="toCollect">
					<view class="types_imgview">
						<image class="types_img" style="width: 44upx; height: 44upx;" src="../../static/mine/shoucang.svg"></image>
					</view>
					<view class="types_name">收藏</view>
				</view>
				<view class="types_box" @click="toRenterOrder">
					<view class="types_imgview">
						<image class="types_img" src="../../static/mine/dingdan.svg"></image>
					</view>
					<view class="types_name">订单</view>
				</view>
				<view class="types_box" @click="toPurse">
					<view class="types_imgview">
						<image class="types_img" src="../../static/mine/qianbao.svg"></image>
					</view>
					<view class="types_name">钱包</view>
				</view>
			</view>
			<!--房东类别-->
			<view class="usertypes" v-if="userstate == 'owner'">
				<view class="types_box" @click="toOrder">
					<view class="types_imgview">
						<image class="types_img" src="../../static/mine/dingdan.svg"></image>
					</view>
					<view class="types_name">订单</view>
				</view>
				<view class="types_box" @click="toPurse">
					<view class="types_imgview">
						<image class="types_img" src="../../static/mine/qianbao.svg"></image>
					</view>
					<view class="types_name">钱包</view>
				</view>
			</view>
		</view>
		<!--用户功能-->
		<view class="content_2" v-if="userstate == 'renter'">
			<view class="function_box" style="background-color: #63D0D5;" @click="toMinehouse">
				<image class="function_icon" src="../../static/mine/wdzf.svg"></image>
				<view class="function_name">我的房屋</view>
			</view>
			<view class="function_box" style="background-color: #FFC26D;" @click="toRentOrder">
				<image class="function_icon" src="../../static/mine/djzd.svg"></image>
				<view class="function_name">代缴账单</view>
			</view>
			<view class="function_box" style="background-color: #63D0D5;" @click="toMinegoods">
				<image class="function_icon" src="../../static/mine/wdjy.svg"></image>
				<view class="function_name">我的家用</view>
			</view>
			<view class="function_box" style="background-color: #4D8EE0;" @click="toList">
				<image class="function_icon" src="../../static/mine/zdjl.svg"></image>
				<view class="function_name">账单记录</view>
			</view>
			<!-- <view class="function_box" style="background-color: #8FD3F4;" @click="toMinepublish"> -->
			<view class="function_box" style="background-color: #8FD3F4;" @click="toPushList">
				<image class="function_icon" src="../../static/mine/wdfb.svg"></image>
				<view class="function_name">我的发布</view>
			</view>
			<view class="function_box" style="background-color: #FF7896;" @click="weixiu">
				<image class="function_icon" src="../../static/mine/zxwx.svg"></image>
				<view class="function_name">在线维修</view>
			</view>
		</view>
		<!--房东功能-->
		<view class="content_2" v-if="userstate == 'owner'">
			<view class="function_box" style="background-color: #63D0D5;" @click="toManage">
				<image class="function_icon" src="../../static/mine/wdzf.svg"></image>
				<view class="function_name">房屋管理</view>
			</view>
			<view class="function_box" style="background-color: #FFC26D;" @click="toRentermanage">
				<image class="function_icon" src="../../static/mine/djzd.svg"></image>
				<view class="function_name">租客管理</view>
			</view>
			<view class="function_box" style="background-color: #63D0D5;" @click="toGoodsList">
				<image class="function_icon" src="../../static/mine/wdjy.svg"></image>
				<view class="function_name">商品管理</view>
			</view>
			<view class="function_box" style="background-color: #4D8EE0;" @click="toOrderList">
				<image class="function_icon" src="../../static/mine/zdjl.svg"></image>
				<view class="function_name">账单管理</view>
			</view>
			<view class="function_box" style="background-color: #8FD3F4;" @click="toCustomerPush">
				<image class="function_icon" src="../../static/mine/wdfb.svg" style="transform: rotate(180deg);"></image>
				<view class="function_name">租客频道</view>
			</view>
			<button open-type="contact" class="function_box" style="background-color: #FF7896;width: 300upx;margin-left: 45upx;">
				<image class="function_icon" src="../../static/mine/service.svg"></image>
				<view class="function_name">在线客服</view>
			</button>
		</view>
		<!--用户切换入口-->
		<view class="content_3" v-if="userstate == 'renter'" @click="toRequest">
			<view class="identify_box">
				<image class="identify_icon" src="../../static/mine/idenfity.svg"></image>
				<view class="identify_info">
					<view class="identify_name">房东入口</view>
					<view class="identify_intro">认证完成后方可在本社区出租房源</view>
				</view>
				<view class="identify_goto">
					<view class="goto_text">立即入驻</view>
					<image class="goto_icon" src="../../static/mine/toRight.svg"></image>
				</view>
			</view>
		</view>
		<!--房东切换入口-->
		<view class="content_3" v-if="userstate == 'owner'" @click="torenter">
			<view class="identify_box">
				<image class="identify_icon" src="../../static/mine/idenfity.svg"></image>
				<view class="identify_info">
					<view class="identify_name">租客入口</view>
				</view>
				<view class="identify_goto">
					<view class="goto_text">立即入驻</view>
					<image class="goto_icon" src="../../static/mine/toRight.svg"></image>
				</view>
			</view>
		</view>
		<!--房东拍照-->
		<view class="content_4" v-if="userstate == 'owner'" @click="toTakebill">
			<image class="icon_4" src="../../static/mine/photo.svg"></image>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				userstate: 'renter',
				code: '',
				codestate: '',
				encryptedData: '',
				iv: '',
				userimg: '../../static/mine/userimg.png',
				username: '点击登录',
				state: '',
				//用户可用积分
				point: 0,
			}
		},
		methods: {
			//显示功能页面未完善
			expect:function(){
				//显示功能页面未完善
				new Request().showToast('敬请期待');
				return
			},
			//跳转产品列表
			toGoodsList: function(){
				uni.navigateTo({
					url: '/pages/mine/owner/goods/list/goodsList' 
				})
			},
			//跳转租客频道
			toCustomerPush: function(){
				uni.navigateTo({
					url: '/pages/mine/push/boos/pushlist' 
				})
			},
			//跳转我的发布(租客)
			toPushList: function() {
				uni.navigateTo({
					url: '/pages/mine/push/push'
				})
			},
			//跳转我的订单(租客)
			toRenterOrder: function() {
				uni.navigateTo({
					url: '/pages/mine/order/order'
				})
			},
			//跳转代缴账单
			toRentOrder: function() {
				uni.navigateTo({
					url: '/pages/mine/rentorder',
				})
			},
			//跳转积分列表
			toRentPint: function() {
				uni.navigateTo({
					url: '/pages/mine/point/point',
				})
			},
			//跳转拍摄账单
			toTakebill: function() {
				uni.navigateTo({
					url: '/pages/mine/owner/takephoto/takephoto'
				})
			},
			//跳转账单记录(租客)
			toList: function() {
				uni.navigateTo({
					url: '/pages/mine/List'
				})
			},
			//跳转账单记录(房东)
			toOrderList: function() {
				uni.navigateTo({
					url: '/pages/mine/owner/orderList'
				})
			},
			//跳转租客页面
			torenter: function() {
				this.userstate = 'renter'
			},
			//跳转至收藏页面
			toCollect: function() {
				uni.navigateTo({
					url: '/pages/mine/collect/collect'
				})
			},
			//跳转至钱包页面
			toPurse: function() {
				
				uni.navigateTo({
					url: '/pages/mine/purse/purse'
				})
			},
			//跳转我的房屋
			toMinehouse: function() {
				new Request('customer/Customer_House_Room/GetMyHoust').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid
						}
					},
					(res) => {
						if (res.data.code == '0') {
							new Request().showToast(res.data.msg);
						} else {
							uni.navigateTo({
								url: '/pages/mine/minehouse'
							})
						}
					}
				)
			},
			//跳转我的家用
			toMinegoods: function() {
				new Request('customer/Customer_Goods_Order/GetInfo').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							userid: app.globalData.userid,
						}
					},
					(res) => {
						if (res.data.code == '0') {
							new Request().showToast(res.data.msg);
						} else {
							uni.navigateTo({
								url: '/pages/mine/minegoods'
							})
						}
					}
				)
			},
			//跳转到在线维修页面
			weixiu: function(){
				new Request('customer/Customer_House_Room/GetCustomerHouseRoomInfo').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid
						}
					},
					(res) => {
						let phone = res.data.order_house_detail.house_phone;
						if (res.data.code == '0') {
							new Request().showToast('还未入驻');
							return;
						} else {
							uni.showModal({
							    title: '提示',
							    content: '拨打联系电话',
							    success: function(show) {
							        if (show.confirm) {
										setTimeout(()=>{
											uni.makePhoneCall({
											    phoneNumber: phone.toString(), //仅为示例
											});
										},400);
							        } else if (show.cancel) {

							        }
							    }
							});
						}
					}
				)
			},
			//跳转我的发布
			toMinepublish: function() {
				uni.navigateTo({
					url: '/pages/mine/publish'
				})
			},
			//跳转我的订单(房东)
			toOrder: function() {
				uni.navigateTo({
					url: '/pages/mine/owner/order/order'
				})
			},
			//跳转房东认证页面
			toRequest: function() {
				new Request('landboos/Get_Landboos_Info/GetLandboosInfo').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid
						}
					},
					(res) => {
						if (res.data.data.status == '2') {
							// this.userstate = 'owner'
							uni.reLaunch({
								url: '/pages/mine/mine?userstate=owner'
							})
						} else if (res.data.data.status == '1') {
							uni.showToast({
								position: 'center',
								title: '审核不通过,重新提交',
								icon: 'none',
							});
							setTimeout(()=>{
								uni.navigateTo({
									url: '/pages/mine/owner/request'
								});
							},2000);
							
						} else if (res.data.data.status == '3') {
							uni.navigateTo({
								url: '/pages/mine/owner/success'
							})
						} else if (res.data.data == '-1') {
							uni.navigateTo({
								url: '/pages/mine/owner/request'
							})
						}
					}
				)
			},
			//跳转房屋管理
			toManage: function() {
				uni.navigateTo({
					url: '/pages/mine/owner/manage/manage'
				})
			},
			//跳转租客管理页面
			toRentermanage: function() {
				uni.navigateTo({
					url: '/pages/mine/owner/rentermanage/rentermanage'
				})
			},
			//用户登录
			getUserInfo: function() {
				if (this.codestate == '1') {
					console.log('用户已登录')
				} else {
					//调用之前，请判断用户是否已经注册了 不能每次点击注册
					uni.login({
						provider: 'weixin',
						success: (res) => {
							this.code = res.code
							uni.getUserInfo({
								success: (res) => {
									this.encryptedData = res.encryptedData
									this.iv = res.iv
									new Request('User_Login/GetUserOpendInfoAndRegister').request(
										() => {
											return 'POST'
										},
										() => {
											return {
												register: 'true',
												DevelopVersion: app.globalData.DevelopVersion,
												project: app.globalData.project,
												encryptedData: this.encryptedData,
												iv: this.iv,
												code: this.code
											}
										},
										(res) => {
											app.globalData.Logincode = res.data.data.LoginCode;
											app.globalData.openid = "oYJnf4l0VQJTGS0gFayRKDoV-VHU";
											new Request('Get_User_Info/GetUserInfo').request(
												() => {
													return 'POST'
												},
												() => {
													return {
														openid: app.globalData.openid,
														DevelopVersion: app.globalData.DevelopVersion,
														project: app.globalData.project,
													}
												},
												(res) => {
													console.log(res.data.data)
													this.userimg = res.data.data.avatar
													this.username = res.data.data.user_name;
													
												}
											)
										}
									)
								},
								fail: (err) => {
									console.log('用户拒绝授权')
								}
							})
						}
					})
				}
			}
		},
		onLoad(option) {
			this.userstate = option.userstate
			//获取用户信息接口
			new Request('Get_User_Info/GetUserInfo').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project,
					}
				},
				(res) => {
					console.log(res)
					if (res.data.data == null) {
						console.log('用户未登录')
					} else {
						console.log('用户已登录')
						this.codestate = res.data.code
						this.userimg = res.data.data.avatar
						this.username = res.data.data.user_name
						//用户可用积分
						this.point = res.data.data.point
					}
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 100upx;
	}

	/*
		用户信息样式
	*/
	.content_1 {
		height: 282upx;
		background-color: #FFFFFF;
		border-radius: 50upx;
		margin: 0 35upx;
		margin-top: 80upx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.userimg {
		height: 136upx;
		width: 136upx;
		border-radius: 136upx;
		position: absolute;
		left: 0upx;
		top: -60upx;
		background-color: #333333;
	}

	.userinfo_view {
		height: 50upx;
		width: 580upx;
		margin-top: 30upx;
		margin-left: 90upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	
	.user_id{
		position: absolute;
		left: 60upx;
		top: -70upx;
		height: 40upx;
		padding: 0upx 40upx;
		border-radius: 35upx;
		background-color: #c7c7c7;
		font-size: 28upx;
		color: #FFFFFF;
		line-height: 40upx;
	}

	.username {
		width: 220upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 36upx;
		color: #000000;
		margin-left: 50upx;
		padding: 0upx 0upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		background-color: transparent;
	}

	.username::after {
		border: none;
	}

	.userinteg {
		height: 40upx;
		display: flex;
		align-items: center;
	}

	.integicon {
		height: 36upx;
		width: 36upx;
		margin-right: 10upx;
	}

	.integnum {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #797979;
	}

	.integright {
		height: 40upx;
		width: 40upx;
		transform: rotate(180deg);
	}

	.usertypes {
		height: 115upx;
		width: 100%;
		margin: 0 auto;
		margin-top: 50upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.types_box {
		height: 115upx;
		width: 68upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.types_imgview {
		height: 68upx;
		width: 68upx;
		display: flex;
		align-items: center;
		border-radius: 68upx;
		border: 2upx solid #666666;
	}

	.types_img {
		height: 36upx;
		width: 36upx;
		margin: 0 auto;
	}

	.types_name {
		height: 34upx;
		line-height: 34upx;
		font-size: 24upx;
		color: #999999;
	}

	/*
		用户功能样式
	*/
	.content_2 {
		height: auto;
		width: 644upx;
		padding-top: 40upx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap; //弹性盒元素换行
	}

	.function_box {
		height: 122upx;
		width: 270upx;
		border-radius: 12upx;
		padding-left: 30upx;
		display: flex;
		align-items: center;
		margin-bottom: 40upx;
	}

	.function_icon {
		width: 55upx;
		height: 55upx;
		margin-right: 20upx;
	}

	.function_name {
		height: 44upx;
		line-height: 44upx;
		font-size: 32upx;
		color: #FFFFFF;
	}

	/*
		切换入口样式
	*/
	.content_3 {
		height: 86upx;
		margin: 0 25upx;
		background-color: #FFFFFF;
		border-radius: 12upx;
		padding: 25upx 35upx;
	}

	.identify_box {
		height: 80upx;
		display: flex;
		align-items: center;
	}

	.identify_icon {
		height: 48upx;
		width: 48upx;
		margin-right: 30upx;
	}

	.identify_info {
		height: 80upx;
		width: 340upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-right: 70upx;
	}

	.identify_name {
		height: 46upx;
		line-height: 46upx;
		font-size: 28upx;
		color: #101010;
	}

	.identify_intro {
		height: 34upx;
		line-height: 34upx;
		font-size: 22upx;
		color: #aaaaaa;
	}

	.identify_goto {
		height: 44upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.goto_text {
		height: 38upx;
		line-height: 38upx;
		font-size: 24upx;
		color: #7f7f7f;
	}

	.goto_icon {
		width: 44upx;
		height: 44upx;
		transform: rotate(180deg);
	}

	/*
		房东拍照样式
	*/
	.content_4 {
		height: 100upx;
		width: 100upx;
		margin: 0 auto;
		margin-top: 170upx;
		border-radius: 100upx;
		background-color: #63D0D5;
		display: flex;
		align-items: center;
	}

	.icon_4 {
		height: 48upx;
		width: 48upx;
		margin: 0 auto;
	}
</style>
